import * as echarts from 'echarts';
export const totalHours = {
    color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
    title: {
        text: '总学时数 统计图'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#6a7985'
            }
        }
    },
    legend: {
        data: ['思想成长类总学时数', '文体发展类总学时数', '创新创业类总学时数', '社会实践与志愿服务类总学时数'],
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            name: '思想成长类总学时数',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
                width: 0
            },
            showSymbol: false,
            areaStyle: {
                opacity: 0.8,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: 'rgb(128, 255, 165)'
                    },
                    {
                        offset: 1,
                        color: 'rgb(1, 191, 236)'
                    }
                ])
            },
            emphasis: {
                focus: 'series'
            },
            data: [140, 232, 101, 264, 90, 340, 250]
        },
        {
            name: '文体发展类总学时数',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
                width: 0
            },
            showSymbol: false,
            areaStyle: {
                opacity: 0.8,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: 'rgb(0, 221, 255)'
                    },
                    {
                        offset: 1,
                        color: 'rgb(77, 119, 255)'
                    }
                ])
            },
            emphasis: {
                focus: 'series'
            },
            data: [120, 282, 111, 234, 220, 340, 310]
        },
        {
            name: '创新创业类总学时数',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
                width: 0
            },
            showSymbol: false,
            areaStyle: {
                opacity: 0.8,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: 'rgb(55, 162, 255)'
                    },
                    {
                        offset: 1,
                        color: 'rgb(116, 21, 219)'
                    }
                ])
            },
            emphasis: {
                focus: 'series'
            },
            data: [320, 132, 201, 334, 190, 130, 220]
        },
        {
            name: '社会实践与志愿服务类总学时数',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
                width: 0
            },
            showSymbol: false,
            areaStyle: {
                opacity: 0.8,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: 'rgb(255, 0, 135)'
                    },
                    {
                        offset: 1,
                        color: 'rgb(135, 0, 157)'
                    }
                ])
            },
            emphasis: {
                focus: 'series'
            },
            data: [220, 402, 231, 134, 190, 230, 120]
        },
        // {
        //     name: 'Line 5',
        //     type: 'line',
        //     stack: 'Total',
        //     smooth: true,
        //     lineStyle: {
        //         width: 0
        //     },
        //     showSymbol: false,
        //     label: {
        //         show: true,
        //         position: 'top'
        //     },
        //     areaStyle: {
        //         opacity: 0.8,
        //         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        //             {
        //                 offset: 0,
        //                 color: 'rgb(255, 191, 0)'
        //             },
        //             {
        //                 offset: 1,
        //                 color: 'rgb(224, 62, 76)'
        //             }
        //         ])
        //     },
        //     emphasis: {
        //         focus: 'series'
        //     },
        //     data: [220, 302, 181, 234, 210, 290, 150]
        // }
    ]
};

export const sortRank = (data) => {
    let chartData = data.sort((a, b) => b.count - a.count).map((item, index) => {
        return {
            collegeName: (index + 1) + '. '  + item.collegeName,
            count: item.count
        }
    }).slice(0, 10);
    return {
        title: {
            text: '各学院第二课堂活动排行'
        },
        grid: {
            left: '3%',    // 控制左侧标签区域宽度
            right: '5%',
            containLabel: true
        },
        yAxis: {
            type: 'category',
            inverse: true,
            axisLabel: {
                align: 'right',
                margin: 10,          // 标签与柱子的间距
                fontSize: 12,
                // formatter: value => value.replace(/(.{8})/g, '$1\n') // 标签换行处理
            },
            data: chartData.map(item => item.collegeName)
        },
        xAxis: { show: false },
        series: [{
            type: 'bar',
            data: chartData.map(item => item.count),
            barWidth: '28%',      // 关键！控制柱子纤细度
            label: {
                show: true,
                position: 'right',
                fontSize: 12
            },
            itemStyle: {
                color: new echarts.graphic.LinearGradient(
                    0, 0, 1, 0,        // 渐变方向：从左到右[1,6](@ref)
                    [
                        { offset: 0, color: '#6ACFFF' },  // 浅蓝起始
                        { offset: 1, color: '#1890FF' }  // 深蓝结束
                    ]
                ),
                borderRadius: [0, 5, 5, 0]  // 右侧圆角[5](@ref)
            }
        }]
    }
};

export const pieChart = {
    tooltip: {
        trigger: 'item'
    },
    title: {
        text: '第二课堂热门活动类型饼图'
    },
    legend: {
        top: '10%',
        left: 'center'
    },
    series: [
        {
            name: '各类学时占比',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
            },
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: 40,
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: [
                { value: 1048, name: '社会实践' },
                { value: 735, name: '志愿服务' },
                { value: 580, name: '文体发展' },
                { value: 484, name: '思想成长' },
                { value: 300, name: '技能培训' }
            ]
        }
    ]
};

export const wordCloud = {
    series: [{
        type: 'wordCloud',
        shape: 'circle',
        sizeRange: [20, 80],      // 字体大小范围
        rotationRange: [0, 0],    // 禁止文字旋转
        gridSize: 15,             // 字符间距
        textStyle: {
            color: () => `hsl(${Math.random() * 360}, 70%, 50%)` // 随机HSL颜色
        },
        data: [
            { name: '人工智能', value: 1000 },
            { name: '区块链', value: 850 },
            { name: '元宇宙', value: 720 },
            { name: '大数据', value: 630 },
            { name: '云计算', value: 550 },
            { name: '物联网', value: 490 },
            { name: '5G', value: 430 },
            { name: '量子计算', value: 370 },
        ]
    }]
}


// 数据示例（单位：人）
const data = [
    {
        competition: '蓝桥杯',
        groups: [120, 132, 101, 134], // 4组细分数据
        total: 487                    // 汇总值（折线点）
    },
    {
        competition: '​计算机设计大赛省级赛',
        groups: [220, 182, 191, 234],
        total: 827
    },
    {
        competition: '​粤港澳信息学创新大赛',
        groups: [150, 232, 201, 154],
        total: 737
    },
    {
        competition: '​中国大学生程序设计竞赛',
        groups: [320, 332, 301, 334],
        total: 1287
    },
    {
        competition: '​中国大学生计算机设计大赛',
        groups: [120, 132, 101, 134],
        total: 487
    },
    {
        competition: '​中国大学生计算机应用大赛',
        groups: [220, 182, 191, 234],
        total: 827
    },
    {
        competition: '​中国大学生计算机应用大赛',
        groups: [150, 232, 201, 154],
        total: 737
    }
];

// 生成堆叠柱状图系列
const barSeries = ['2021级', '2022级', '2023级', '2024级'].map((name, idx) => ({
    name,
    type: 'bar',
    stack: 'competition',  // 关键！统一堆叠标识[1,4](@ref)
    data: data.map(item => item.groups[idx]),
    barWidth: 16,
    itemStyle: {
        color: ['#5470c6', '#91cc75', '#fac858', '#ee6666'][idx],
        opacity: 0.8  // 调整透明度增强堆叠识别[4](@ref)
    }
}));

// 折线图系列
const lineSeries = {
    name: '全部汇总',
    type: 'line',
    data: data.map(item => item.total),
    symbolSize: 12,
    lineStyle: {
        width: 3,
        color: '#ff6b6b',
        shadowBlur: 10,  // 增加光晕效果[6](@ref)
        shadowColor: 'rgba(255,107,107,0.3)'
    }
};

export const lineChart = {
    tooltip: {
        trigger: 'axis',
        formatter: params => {
            const competition = params[0].name;
            let html = `${competition}<table>`;

            // 柱状图数据展示
            params.slice(0, 4).forEach(item => {
                html += `<tr><td>${item.marker}</td><td>${item.seriesName}:</td><td>${item.value}</td></tr>`;
            });

            // 汇总值展示
            html += `<tr><td colspan="3" style="border-top:1px solid #ddd;padding-top:5px;">`;
            html += `● 全部汇总: ${params[4].value}</td></tr></table>`;
            return html;
        }
    },
    xAxis: {
        type: 'category',
        data: data.map(item => item.competition),
        axisLabel: { interval: 0}
    },
    yAxis: { name: '人数/人' },
    grid: { bottom: '15%' },
    series: [...barSeries, lineSeries]
};